<template>
    <div class="app-container">
        <el-button @click="dialogFormVisible = true">添加套餐</el-button>

        <!-- 权限列表 -->

        <el-table :data="pcktcList" stripe style="width: 100%">
            <el-table-column prop="id" label="权限id" width="180"> </el-table-column>
            <el-table-column prop="permName" label="权限名字" width="180"> </el-table-column>
            <el-table-column prop="permUrl" label="权限地址"> </el-table-column>
            <el-table-column prop="permDesc" label="权限描述"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="update(scope.row)" icon="el-icon-edit" type="primary" size="mini">修改</el-button>
                    <el-button @click="del(scope.row)" icon="el-icon-delete" type="danger" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageDto.now" :page-sizes="[5, 15, 50, 100]" :page-size="pageDto.size"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <!-- 修改权限的弹框 -->
        <el-dialog title="修改套餐" :visible.sync="dialogFormVisibleXG">
            <el-form>
                <el-form-item label="权限名字" :label-width="formLabelWidth">
                    <el-input v-model="pack.permName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限地址" :label-width="formLabelWidth">
                    <el-input v-model="pack.permUrl" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限描述" :label-width="formLabelWidth">
                    <el-input v-model="pack.permDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="toupdate(); dialogFormVisibleXG = false">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 添加套餐弹框 -->
        <el-dialog title="添加权限" :visible.sync="dialogFormVisible">
            <el-form>
                <el-form-item label="权限名字">
                    <el-input v-model="pcktc.permName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限地址">
                    <el-input v-model="pcktc.permUrl" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限描述">
                    <el-input type="textarea" v-model="pcktc.permDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
        </el-dialog>

        <div ref="qrcode">

        </div>
    </div>
</template>
<script>
import { add, page, update, del } from "@/api/pcktc";
export default {
    data() {
        return {
            dialogFormVisible: false,
            dialogFormVisibleXG: false,
            pcktc: {
                id:"",
                permName:"",
                permUrl:"",
                permDesc:"",
            },
            pcktcList: [],
            //分页信息
            pageDto: {
                now: 1,
                size: 5,
                where: {
                    name: ""
                }
            },
            total: 0,
            //修改
            pack: []
        };
    },
    methods: {
        handleSizeChange(size) {
        this.pageDto.size = size;
        this.search();
    },
    handleCurrentChange(now) {
        this.pageDto.now = now;
        this.search();
    },
        add() {
            add(this.pcktc).then((res) => {
                this.$message({
                    type: res.ok ? "success" : "error",
                    msg: res.message,
                });
                this.dialogFormVisible = false;
                this.search()
            });
        },

        search() {
            page(this.pageDto).then(res => {
                this.pcktcList = res.list
                console.log(res);
                this.total = res.total;
            })
        },
        //修改
        update(data) {
            this.dialogFormVisibleXG = true;
            this.pack = data
        },
        toupdate() {
            update(this.pack).then(res => {
                this.search();
                this.pack = [];
                if (res.ok) {
                    this.$message({
                        type: res.ok ? "success" : "error",
                        message: res.ok ? "success" : "error"
                    })
                }
            })
        },
        //删除
        del(data) {
            del(data).then(res => {
                if (res.ok) {
                    this.$message({
                        type: res.ok ? "success" : "error",
                        message: res.ok ? "success" : "error"
                    })
                }
                this.search()
            })
        }
    },
    created() {
        this.search();
    },
};
</script>
<style lang="css"></style>